
<template>
  <div class="alb_bd">
    <div class="alb_row">
      <div class="alb_heand">
        <div class="hedimg">
          <img :src="albumlist.album.picUrl+'?param=200y200'" width="200px" height="200px" />
        </div>
        <div class="alb_tag">
          <div class="ic">
            <span>专辑</span>
          </div>
          <div class="alb_til">
            <h2>{{albumlist.album.name}}</h2>
          </div>
        </div>
        <div class="alb_tags">
          <span>歌手：</span>
          <a :href="'#/discover/songerInfo/id='+albumlist.album.artist.id">{{albumlist.album.artist.name}}</a>
        </div>
        <div class="alb_tags">
          <span>发行时间：</span>
          <a href="#">2020-05-08</a>
        </div>
        <div class="alb_tags">
          <span>发行公司：</span>
          <a href="#">{{albumlist.album.company}}</a>
        </div>
        <div class="alb_fun">
          <button class="bt">
            <i class="el-icon-video-play" id="md_play1"></i>
            <a href="#" @click="play(albumlist.songs[0].id)">播放</a>
          </button>
          <button class="el-icon-plus"></button>
          <button class="el-icon-folder-add">
            <span>收藏</span>
          </button>
          <button class="el-icon-share">
            <span>({{albumlist.album.info.shareCount}})</span>
          </button>
          <button class="el-icon-s-comment">
            <span>({{albumlist.album.info.commentCount}})</span>
          </button>
        </div>
        <p class="alb_text">
          <span class="alb_he">专辑介绍：</span>
          <span class="alb_bod">{{albumlist.album.description}}</span>
        </p>
      </div>
      <div class="alb_musictab">
        <h3>
          <span>歌曲列表</span>
        </h3>
        <div class="alb_num">
          <span>{{albumlist.album.size}}首歌</span>
        </div>
        <hr />
        <table class="alb_songtable" id="alb_tb1">
          <thead>
            <th class="alb_w1"></th>
            <th class="alb_w2">歌曲标题</th>
            <th class="alb_w3">时长</th>
            <th class="alb_w4">歌手</th>
          </thead>
          <tbody>
            <tr v-for="(item ,index) in albumlist.songs" :key="index">
              <td>
                <span>{{index+1}}</span>
                <a :href="'#/discover/albumInfo/id='+id" @click="play(item.id)">
                  <i class="el-icon-video-play" id="alb_play2"></i>
                </a>
              </td>
              <td>
                <a :href="'#/discover/musicInfo/id='+item.id">{{item.name}}</a>
              </td>
              <td>{{changtime(item.dt)}}</td>
              <td>
                <a :href="'#/discover/songerInfo/id='+item.ar[0].id">{{albumlist.album.artist.name}}</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  props:['id'],
  data() {
    return {
      albumlist: {}
    };
  },
  methods: {
    init: function() {
      axios
        .get("https://api.imjad.cn/cloudmusic/?type=album&id="+this.id)
        .then(input => {
          this.albumlist = input.data
        })
        .catch(err => {
          console.log(err);
        });
    },
    changtime:function(time){
      return this.$store.getters.changeMusicTime(time)
    },
    play(id){
            this.$store.commit('chang',id)
        }
  },
  mounted() {
    this.init();
  }
};
</script>

<style>
* {
  margin: 0px 0px;
  padding: 0px 0px;
}
.alb_bd {
  width: 100%;
  margin: 0px auto;
  background-color: #f5f5f5;
  display: inline-block;
}
.alb_row {
  width: 709px;
  height: 100%;
  background-color: #ffffff;
  padding: 47px 30px 40px 39px;
  border: 1px solid #d3d3d3;
  margin: 0px auto;
}
.alb_row .hedimg {
  width: 208px;
  height: 208px;
  border: 1px solid #d5d5d5;
  position: absolute;
}
.alb_heand {
  margin: 0px auto;
  width: 640px;
  height: 100%;

  position: relative;
}
.alb_row .hedimg img {
  display: inline-block;
  margin: 4px 4px 4px 4px;
}
.alb_tag {
  width: 410px;
  height: 24px;
  margin-left: 230px;
  line-height: 24px;
  display: inline-block;
}
.alb_bd .ic {
  width: 54px;
  height: 24px;
  background: linear-gradient(to bottom, #dd2020, #cc1515);
  margin-left: 6px;
  border-radius: 5px;
  text-align: center;
  float: left;
}
.alb_bd .ic span {
  color: #ffffff;
  font-size: 14px;
}
.alb_til {
  width: 346px;
  height: 24px;
  line-height: 24px;
  margin-left: 70px;
}
.alb_til h2 {
  font-size: 20px;
  font-weight: normal;
  line-height: 24px;
  font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
}
.alb_use {
  width: 410px;
  height: 35px;
  margin-left: 236px;
  margin-top: 12px;
  float: left;
}
.alb_use_img {
  float: left;
}
.alb_name {
  float: left;
  height: 35px;
  line-height: 31px;
}
.alb_name a {
  font-size: 12px;
  margin-left: 10px;
  color: #76a5c8;
  text-decoration: none;
}
.alb_name a:hover {
  text-decoration: underline;
}
.alb_crtime {
  float: left;
  height: 35px;
  line-height: 35px;
  font-size: 12px;
  color: #999999;
  margin-left: 15px;
}
.alb_fun {
  width: 420px;
  height: 31px;
  margin-left: 236px;
  margin-top: 20px;
  display: inline-block;
  position: relative;
}
#alb_play1 {
  margin-left: -25px;
}
.alb_bd .bt {
  width: 70px;
  height: 31px;
  font-size: 18px;
  color: #fff;
  background: linear-gradient(to bottom, #4493dc, #1d6ebe);
  border: none;
  border-radius: 5px;
  line-height: 31px;
  padding-right: 5px;
  border-right: 1px solid #1d5388;
}
.alb_bd .bt:hover {
  cursor: pointer;
  background: linear-gradient(to bottom, #6bafe7, #3382ce);
}
.alb_bd .bt a {
  position: absolute;
  display: inline-block;
  font-size: 12px;
  padding-left: 5px;
  text-decoration: none;
  color: #fff;
  line-height: 31px;
}
.alb_bd .el-icon-plus {
  position: absolute;
  width: 31px;
  height: 31px;
  background: linear-gradient(to bottom, #4493dc, #1d6ebe);
  color: #fff;
  border: none;
  border-radius: 5px;
  line-height: 31px;
}
.alb_bd .el-icon-plus:hover {
  cursor: pointer;
  background: linear-gradient(to bottom, #6bafe7, #3382ce);
}
.alb_bd button {
  padding: 0 8px;
}
.alb_bd .el-icon-folder-add {
  position: absolute;
  height: 31px;
  background: linear-gradient(to bottom, #ffffff, #f1f1f1);
  color: #666666;
  border-radius: 5px;
  line-height: 31px;
  top: 0px;
  left: 105px;
  border: 1px solid #dedddd;
  font-size: 18px;
}
.alb_bd .el-icon-folder-add:hover {
  cursor: pointer;
  background: linear-gradient(to bottom, #ffffff, #f8f8f8);
}
.alb_bd .el-icon-folder-add span {
  font-size: 12px;
  margin-left: 2px;
}
.alb_bd .el-icon-share {
  position: absolute;
  width: 72px;
  height: 31px;
  background: linear-gradient(to bottom, #ffffff, #f1f1f1);
  color: #666666;
  border-radius: 5px;
  line-height: 31px;
  top: 0px;
  left: 200px;
  border: 1px solid #dedddd;
  font-size: 18px;
}
.alb_bd .el-icon-share:hover {
  cursor: pointer;
  background: linear-gradient(to bottom, #ffffff, #f8f8f8);
}
.alb_bd .el-icon-share span {
  font-size: 12px;
  margin-left: 2px;
}
.alb_bd .el-icon-s-comment {
  position: absolute;
  width: 72px;
  height: 31px;
  background: linear-gradient(to bottom, #ffffff, #f1f1f1);
  color: #666666;
  border-radius: 5px;
  line-height: 31px;
  top: 0px;
  left: 290px;
  border: 1px solid #dedddd;
  font-size: 18px;
}
.alb_bd .el-icon-s-comment:hover {
  cursor: pointer;
  background: linear-gradient(to bottom, #ffffff, #f8f8f8);
}
.alb_bd .el-icon-s-comment span {
  font-size: 12px;
  margin-left: 2px;
}
.alb_tags {
  width: 420px;
  margin-left: 236px;
  display: inline-block;
  position: relative;
  margin-top: 10px;
}
.alb_tags span {
  font-size: 12px;
  color: #666666;
}
.alb_tags a {
  display: inline-block;
  padding: 0 8px;
  font-size: 12px;
  color: #777777;
  border-radius: 20px;
  text-align: center;
  line-height: 22px;
  text-decoration: none;
  margin-right: 10px;
}
.alb_tags a:hover {
  background: linear-gradient(to bottom, #ffffff, #fafafa);
}
.alb_text {
  width: 640px;
  height: 200px;
  font-size: 12px;
  color: #666666;
  margin-top: 80px;
  line-height: 22px;
  text-overflow: ellipsis;
  overflow: hidden;
}
.alb_text .alb_he {
  color: black;
  font-size: 13px;
  font-weight: bolder;
}
.alb_text .alb_bod {
  display: block;
  text-indent: 2em;
}
.alb_musictab {
  width: 640px;
  height: 100%;
  margin: 0px auto;
  margin-top: 20px;
}
.alb_musictab h3 {
  font-size: 20px;
  line-height: 28px;
  font-weight: normal;
  color: #333333;
  display: inline-block;
}
.alb_num {
  display: inline-block;
  font-size: 12px;
  color: #666666;
  margin-left: 20px;
}
.alb_songnum {
  display: inline-block;
  font-size: 12px;
  color: #666666;
  margin-left: 372px;
}
.alb_musictab hr {
  background-color: #c20c0c;
  height: 2px;
  border: none;
}
.alb_songtable {
  width: 100%;
  border: 1px solid #d9d9d9;
  border-collapse: collapse;
}
.alb_songtable a {
  text-decoration: none;
  color: #333333;
}
.alb_songtable a:hover {
  text-decoration: underline;
}
.alb_w1 {
  width: 74px;
  height: 34px;
}
.md_w2 {
  width: 342px;
  height: 34px;
}
.alb_w3 {
  width: 111px;
  height: 34px;
}
.alb_w4 {
  width: 89px;
  height: 34px;
}
.alb_w5 {
  width: 127px;
  height: 34px;
}
.alb_bd th {
  border: 1px solid #d9d9d9;
  background: linear-gradient(to bottom, #ffffff, #f0f0f0);
  font-size: 12px;
  color: #666666;
  font-weight: normal;
  text-align: left;
  padding-left: 8px;
}
.alb_bd tr {
  font-size: 12px;
  color: #333333;
  height: 30px;
}
#alb_play2 {
  font-size: 20px;
  color: #bcbcbc;
  position: absolute;
  margin-top: 6px;
  margin-left: 18px;
}
#alb_tb1 td span {
  margin-left: 5px;
  color: #bcbcbc;
  line-height: 30px;
}
#alb_tb1 td {
  padding-left: 8px;
  position: relative;
}
#alb_tb1 .el-icon-video-play {
  position: absolute;
  right: 10px;
}
#alb_tb1 tr:nth-child(odd) {
  background-color: #f7f7f7;
}
</style>